<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
<body>

<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">恶意节点分析</div>
                <div class="layui-card-body">
                    <div id="charts" style="height: 600px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript" type="text/javascript" charset="UTF-8">
    layui.config({
        base: '/static/lib/' //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(["echarts","ecStat"],
        function() {
            var $ = layui.jquery,
                element = layui.element,
                echarts = layui.echarts,
                alg = [[${session.alg}]],
                option1 = {
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: [alg, 'DPOS']
                    },
                    xAxis: {
                        name: '运行轮数',
                        type: 'category',
                        //data: [[${rounds}]],
                        data: [2,3,4,5,6,7,8,9,10],
                        tooltip: {
                            valueFormatter: function (value) {
                                return '运行轮数：'+value;
                            }
                        },
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '平均恶意节点占比率',
                        min: 0.02,
                        max: 0.15,
                        interval: 100
                    },
                    series: [{
                        name: alg,
                        data: [0.07285714285714287, 0.056190476190476187, 0.04785714285714284, 0.03885714285714284, 0.034285714285714274, 0.02435374149659865, 0.026071428571428565, 0.026349206349206348, 0.01952380952380952],
                        //data: [[${DposptData}]],
                        type: 'line',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value.toFixed(4);
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#66cc99'
                            }
                        },
                        barMaxWidth: '50'
                    },
                        {
                            name: 'DPOS',
                            //data: [[${DposData}]],
                            data: [0.08523809523809522, 0.10698412698412695, 0.09047619047619047, 0.08685714285714283, 0.10396825396825393, 0.09959183673469385, 0.0921428571428571, 0.09862433862433857, 0.10676190476190474],
                            type: 'line',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value.toFixed(4);
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#FFFF66'
                                }
                            },
                            barMaxWidth: '50'
                        }]
                };
            mychart1 = echarts.init(document.getElementById('charts'));
            mychart1.setOption(option1, true)

        }
    );
</script>
</body>
</html>
